<template>
	<view>
		<view class="block__title">安全事件</view>
		<view class="cu-form-group">
			<view class="title">主体类型</view>
			<picker bindchange="PickerChange"
			:value="objTypeIndex" 
			:range-key="'name'"
			:range="objTypes" 
			v-if = "objTypes.length>0"
			 @change="objTypeChange">
				<view class="picker">
					{{objTypes.length==0 ? "请选择" : objTypes[objTypeIndex].name}}
				</view>
			</picker>
		</view>
		<view class="cu-form-group" v-if="objType == '1'">
			<view class="title">所属线路</view>
			<picker bindchange="PickerChange"
			:value="roadIndex" 
			:range-key="'roadName'" 
			:range="govRoadProtections" 
			v-if = "govRoadProtections.length>0"
			 @change="roadChange">
				<view class="picker">
					{{govRoadProtections.length==0 ? "请选择" : govRoadProtections[roadIndex].roadName}}
				</view>
			</picker>
		</view>
		<view class="cu-form-group arrow" v-if="objType == '2'">
			<view class="title">所属行政区</view>
			<pickerAddress @change="change" class="text-right" style="width:80%">{{areaName}}</pickerAddress>
			<text class='cuIcon-right'></text>
		</view>
		<view class="cu-form-group" v-if="objType == '2'">
			<view class="title">选择学校</view>
			<picker bindchange="PickerChange"
			:value="schoolIndex" 
			:range-key="'schoolName'" 
			:range="govSchools" 
			v-if = "govSchools.length>0"
			 @change="schoolChange">
				<view class="picker">
					{{govSchools.length==0 ? "请选择" : govSchools[schoolIndex].schoolName}}
				</view>
			</picker>
		</view>
		<view class="cu-form-group">
			<view class="title">案（事）件编号</view>
			<input v-model="caseCode" placeholder="请输入案（事）件编号" class="text-right"></input>
		</view>
		<view class="cu-form-group">
			<view class="title">案（事）件名称</view>
			<input v-model="caseName" placeholder="请输入案（事）件名称" class="text-right"></input>
		</view>
		<view class="cu-form-group arrow">
			<view class="title">发生日期</view>
			<picker mode="date" :value="bindDate" start="2020-09-01" end="2050-09-01" @change="dateChange">
				<view class="picker">
					{{bindDate}}
				</view>
			</picker>
		</view>
		<view class="cu-form-group arrow">
			<view class="title">发生时间</view>
			<picker mode="time" :value="bindTime" start="08:30" end="22:00" @change="timeChange">
				<view class="picker">
					{{bindTime}}
				</view>
			</picker>
		</view>
		<view class="cu-form-group">
			<view class="title">发生地点</view>
			<input v-model="happenedPlace" placeholder="请输入发生地点" class="text-right"></input>
		</view>
		<view class="cu-form-group">
			<view class="title">案件性质</view>
			<picker bindchange="PickerChange"
			:value="caseTypeIndex" 
			:range-key="'name'" 
			:range="caseTypes" 
			v-if = "caseTypes.length>0"
			 @change="caseTypeChange">
				<view class="picker">
					{{caseTypes.length==0 ? "请选择" : caseTypes[caseTypeIndex].name}}
				</view>
			</picker>
		</view>
		<view class="cu-form-group">
			<view class="title">主犯（嫌疑人）证件类型</view>
			<picker bindchange="PickerChange"
			:value="idIndex" 
			:range-key="'name'"
			:range="idTypes" 
			v-if = "idTypes.length>0"
			 @change="idTypeChange">
				<view class="picker">
					{{idTypes.length==0 ? "请选择" : idTypes[idIndex].name}}
				</view>
			</picker>
		</view>
		<view class="cu-form-group">
			<view class="title">主犯（嫌疑人）证件号码</view>
			<input v-model="idCard" placeholder="请输入证件号码" class="text-right"></input>
		</view>
		<view class="cu-form-group">
			<view class="title">主犯（嫌疑人）姓名</view>
			<input v-model="personName" placeholder="请输入主犯（嫌疑人）姓名" class="text-right"></input>
		</view>
		<view class="cu-form-group">
			<view class="title">是否破案</view>
			<picker bindchange="PickerChange"
			:value="solveIndex"
			:range-key="'name'"
			:range="caseSolveds"
			v-if = "caseSolveds.length>0"
			 @change="solvedsChange">
				<view class="picker">
					{{caseSolveds.length==0 ? "请选择" : caseSolveds[solveIndex].name}}
				</view>
			</picker>
		</view>
		<view class="cu-form-group">
			<view class="title">作案人数</view>
			<input v-model="personNum" placeholder="请输入作案人数" class="text-right"></input>
		</view>
		<view class="cu-form-group">
			<view class="title">在逃人数</view>
			<input v-model="fleeingNum" placeholder="请输入在逃人数" class="text-right"></input>
		</view>
		<view class="cu-form-group">
			<view class="title">抓捕人数</view>
			<input v-model="arrestsNum" placeholder="请输入抓捕人数" class="text-right"></input>
		</view>
		<view class="cu-form-group margin-top">
			<textarea v-model="detectionContent" placeholder="请输入案件侦破情况"></textarea>
		</view>
		<view class="cu-form-group margin-top">
			<textarea v-model="caseContent" placeholder="请输入案（事）件情况"></textarea>
		</view>
		<view class="block__title">相关图片</view>

		<view class="cu-bar bg-white ">
			<view class="action">
				图片上传
			</view>
			<view class="action">
				{{imgList.length}}/4
			</view>
		</view>
		<view class="cu-form-group">
			<view class="grid col-4 grid-square flex-sub">
				<view class="bg-img" v-for="(img,index) in imgList" :key='index' bindtap="ViewImage" :data-url="imgList[index]">
					<image :src='imgList[index]' mode='aspectFill'></image>
					<view class="cu-tag bg-red" @tap="deleteImage(index)" :data-index="index">
						<text class="cuIcon-close"></text>
					</view>
				</view>
				<view class="solids" @tap="ChooseImage" v-if="imgList.length<4">
					<text class="cuIcon-cameraadd"></text>
				</view>
			</view>
		</view>
		<view class="button_up_blank"></view>
		<view class="flex flex-direction">
			<button class="cu-btn bg-green margin-tb-sm lg" @click="submitReport()">提交</button>
		</view>

	</view>
</template>

<script>
	// pages/enterCommunity/enterCommunity.js
	import pickerAddress from "../../components/pickerAddress/pickerAddress.vue"
	import * as TanslateImage from '../../lib/java110/utils/translate-image.js';
	import {checkPhoneNumber} from '../../lib/java110/utils/StringUtil.js'
	import {savePhoneGovProtectionCase,queryGovRoadProtection,queryGovSchool,queryDicts
	} from '../../api/caseReportInfo/caseReportInfoApi.js'
	import {
		getAreaId
	} from '../../api/area/areaApi.js'
	export default {
		components: {
			pickerAddress
		},
		data() {
			return {
				areaName:"请选择",
				objType: '',
				objId: '',
				objName: '',
				caId: '',
				govCommunityId: '',
				caseName: '',
				caseCode: '',
				areaCode: '',
				happenedTime: '',
				happenedPlace: '',
				caseType: '',
				idType: '',
				idCard: '',
				personName: '',
				isSolved: '',
				personNum: '',
				fleeingNum: '',
				arrestsNum: '',
				detectionContent: '',
				caseContent: '',
				eventsName: '',
				eventsAddress: '',
				bindDate: '请选择',
				bindTime: '请选择',
				ramark: '',
				imgList: [],
				userId: '30518939884421922816',
				userName: '',
				photos: [],
				index: 0,
				caseSolveds: [
					{"name":"请选择","id":""},
					{"name":"破案","id":"1"},
					{"name":"未破案","id":"2"},
					],
				solveIndex: 0,
				objTypes: [
					{"name":"请选择","id":""},
					{"name":"道路","id":"1"},
					{"name":"校园周边","id":"2"}],
				objTypeIndex: 0,
				govRoadProtections: [],
				roadIndex: 0,
				govSchools: [],
				schoolIndex: 0,
				caseTypes: [],
				caseTypeIndex: 0,
				idTypes: [],
				idIndex: 0,
			};
		},
		/**
		 * 生命周期函数--监听页面加载
		 */
		onLoad: function(options) {
			let that = this;
			this.vc.onLoad(options);
			that._loadInitData();
		},
		/**
		 * 生命周期函数--监听页面初次渲染完成
		 */
		onReady: function() {},

		/**
		 * 生命周期函数--监听页面显示
		 */
		onShow: function() {
		},

		/**
		 * 生命周期函数--监听页面隐藏
		 */
		onHide: function() {},

		/**
		 * 生命周期函数--监听页面卸载
		 */
		onUnload: function() {
		},

		/**
		 * 页面相关事件处理函数--监听用户下拉动作
		 */
		onPullDownRefresh: function() {},

		/**
		 * 页面上拉触底事件的处理函数
		 */
		onReachBottom: function() {},
		/**
		 * 用户点击右上角分享
		 */
		onShareAppMessage: function() {},
		methods: {
			change: function(data) {
				let _that = this;
				_that.areaName = '';
				data.data.forEach(function(_obj) {
					_that.areaName += _obj.name;
				});
				_that.areaCode = data.data[2].code;
			},
			submitReport: function(e) {
				let obj = {
					"objId": this.objId,
					"objName": this.objName,
					"objType": this.objType,
					"caseName": this.caseName,
					"areaCode": this.areaCode,
					"caseCode": this.caseCode,
					"happenedTime": this.bindDate + " " + this.bindTime + ":00",
					"happenedPlace": this.happenedPlace,
					"caseType": this.caseType,
					"idType": this.idType,
					"idCard": this.idCard,
					"personName": this.personName,
					"isSolved": this.isSolved,
					"personNum": this.personNum,
					"fleeingNum": this.fleeingNum,
					"arrestsNum": this.arrestsNum,
					"detectionContent": this.detectionContent,
					"caseContent": this.caseContent,
					"photos": [],
					"caId": getAreaId(),
				}
				let _photos = this.photos;
				_photos.forEach(function(_item) {
					obj.photos.push({
						"photo": _item
					});
				});
				let msg = "";
				if (obj.objId == "") {
					msg = "请选择主体对象";
				}else if (obj.objType == "") {
					msg = "请选择主体类型";
				}else if (obj.caseContent == "") {
					msg = "请填写案件情况";
				}else  if (obj.detectionContent == "") {
					msg = "请填写案件侦破情况";
				}else  if (obj.arrestsNum == "") {
					msg = "请填写抓捕人数";
				}else  if (obj.fleeingNum == "") {
					msg = "请填写在逃人数";
				}else if (obj.personNum == "") {
					msg = "请填写作案人数";
				}else if (obj.personName == "") {
					msg = "请填写主犯（嫌疑人）姓名";
				}else if (obj.idCard == "") {
					msg = "请填写主犯（嫌疑人）证件号码";
				}else  if (obj.idType == "") {
					msg = "请选择主犯（嫌疑人）证件类型";
				}else if (obj.caseType == "") {
					msg = "请选择案件性质";
				}else  if (obj.happenedPlace == "") {
					msg = "请填写发生地点";
				}else if (obj.caseCode == "") {
					msg = "请填写案（事）件编码";
				}else if (obj.caseName == "") {
					msg = "请填写案（事）件名称";
				}else if (obj.happenedTime == "") {
					msg = "请选择发生日期";
				}else if (obj.isSolved == "") {
					msg = "请选择是否破案";
				}else if (obj.eventsAddress == "") {
					msg = "请填写发生地点";
				}else if (obj.ramark == "") {
					msg = "请填写报修内容";
				}
				if (msg != "") {
					wx.showToast({
						title: msg,
						icon: 'none',
						duration: 2000
					});
				} else {
					savePhoneGovProtectionCase(obj)
						.then(_data => {
							uni.showToast({
								icon: 'none',
								title: '保存成功'
							});
							wx.redirectTo({
								url: '/pages/protectionCaseReport/protectionCaseReport',
							});
						}, err => {
							uni.showToast({
								icon: 'none',
								title: err
							})
						})
				}
			},
			afterRead: function(event) {
				const {
					file
				} = event.detail;

				let _that = this;
				const {
					photoList = []
				} = this;
				photoList.push(file);
				this.photoList = photoList;
				factory.base64.urlTobase64(file.path).then(function(_baseInfo) {
					_that.photos.push(_baseInfo);
				});
			},
			deleteImage: function(e) {
				let imageArr = this.$data.imgList;
				imageArr.splice(e, 1);
				this.photos.splice(e, 1);
			},
			ChooseImage: function(e) {
				let that = this;
				wx.chooseImage({
					count: 4, //默认9
					sizeType: ['compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: (res) => {
						that.$data.imgList.push(res.tempFilePaths[0]);
						var tempFilePaths = res.tempFilePaths[0]
						//#ifdef H5
						TanslateImage.translate(tempFilePaths, (url) => {
							that.photos.push(url);
						})
						//#endif

						//#ifdef MP-WEIXIN
						factory.base64.urlTobase64(tempFilePaths).then(function(_res) {
							that.photos.push(_res);
						});
						//#endif
					}
				});
			},
			roadChange: function(e) {
				this.roadIndex = e.target.value //取其下标
				let selected = this.govRoadProtections[this.roadIndex] //获取选中的数组
				if(selected == undefined){
					return;
				}
				this.objId = selected.roadProtectionId;//选中的id
				this.objName = selected.roadName;
			},
			schoolChange: function(e) {
				this.schoolIndex = e.target.value //取其下标
				let selected = this.govSchools[this.schoolIndex] //获取选中的数组
				if(selected == undefined){
					return;
				}
				this.objId = selected.schoolId //选中的id
				this.objName = selected.schoolName;
			},
			caseTypeChange: function(e) {
				this.caseTypeIndex = e.target.value //取其下标
				let selected = this.caseTypes[this.caseTypeIndex] //获取选中的数组
				if(selected == undefined){
					return;
				}
				this.caseType = selected.statusCd //选中的id
			},
			idTypeChange: function(e) {
				this.idIndex = e.target.value //取其下标
				let selected = this.idTypes[this.idIndex] //获取选中的数组
				if(selected == undefined){
					return;
				}
				this.idType = selected.statusCd //选中的id
			},
			solvedsChange: function(e) {
				this.solveIndex = e.target.value //取其下标
				let selected = this.caseSolveds[this.solveIndex] //获取选中的数组
				if(selected == undefined){
					return;
				}
				this.isSolved = selected.id //选中的id
			},
			objTypeChange: function(e) {
				this.objTypeIndex = e.target.value //取其下标
				let selected = this.objTypes[this.objTypeIndex] //获取选中的数组
				if(selected == undefined){
					return;
				}
				this.objType = selected.id //选中的id
			},
			dateChange: function(e) {
				this.bindDate = e.detail.value;
			},
			timeChange: function(e) {
				this.bindTime = e.detail.value;
			},
			_loadInitData: function() {
				let _that = this;
				// 默认选择第一个
				_that.roadIndex = 0;
				let dataObj = {
					page: 1,
					row: 50,
					caId: getAreaId()
				};
				queryGovRoadProtection(dataObj).then(_data =>{
					let _json = _data;
					if (_json.code == 0 && _json.data.length > 0) {
						let _ina = [{"roadProtectionId":"","roadName":"请选择"}];
						_that.govRoadProtections = _ina.concat(_json.data);
						let selected = _that.govRoadProtections[_that.roadIndex] //获取选中的数组
						_that.objId = selected.roadProtectionId //选中的id
					}else{
						uni.showToast({
							icon:"none",
							title:"未配置"
						})
					}
				});
				queryGovSchool(dataObj).then(_data =>{
					let _json = _data;
					if (_json.code == 0 && _json.data.length > 0) {
						let _ina = [{"schoolId":"","schoolName":"请选择"}];
						_that.govSchools = _ina.concat(_json.data);
						let selected = _that.govSchools[_that.schoolIndex] //获取选中的数组
						_that.objId = selected.schoolId //选中的id
					}else{
						uni.showToast({
							icon:"none",
							title:"未配置"
						})
					}
				});
				dataObj = {
					name: "gov_road_protection_case",
					type: "case_type"
				};
				queryDicts(dataObj).then(_data =>{
					let _json = _data;
					let _ina = [{"statusCd":"","name":"请选择"}];
					_that.caseTypes = _ina.concat(_json.data);
					let selected = _that.caseTypes[_that.caseTypeIndex] //获取选中的数组
					_that.caseType = selected.statusCd
				})
				dataObj = {
					name: "gov_road_protection_case",
					type: "id_type"
				};
				queryDicts(dataObj).then(_data =>{
					let _json = _data;
					let _ina = [{"statusCd":"","name":"请选择"}];
					_that.idTypes = _ina.concat(_json.data);
					let selected = _that.idTypes[_that.idIndex]//获取选中的数组
					_that.caseType = selected.statusCd
				})
			}
		}
	};
</script>
<style>
	.block__title {
		margin: 0;
		font-weight: 400;
		font-size: 14px;
		color: rgba(69, 90, 100, .6);
		padding: 40rpx 30rpx 20rpx;
	}

	.button_up_blank {
		height: 40rpx;
	}
</style>
